/**
 * 检查清单面板组件
 * 显示文章质量检查清单
 */

import React from 'react';
import { List, Progress, Tag, Space, Button, Tooltip } from 'antd';
import {
  CheckCircleOutlined,
  CloseCircleOutlined,
  ExclamationCircleOutlined,
  ClockCircleOutlined,
  RightOutlined,
} from '@ant-design/icons';
import type { ChecklistItem } from '@/stores/copilot.store';
import './style.css';

interface ChecklistPanelProps {
  items: ChecklistItem[];
  progress?: number;
  onItemClick?: (item: ChecklistItem) => void;
}

/**
 * 获取状态图标
 */
const getStatusIcon = (status: ChecklistItem['status']) => {
  const iconMap = {
    passed: <CheckCircleOutlined style={{ color: '#52c41a' }} />,
    warning: <ExclamationCircleOutlined style={{ color: '#faad14' }} />,
    failed: <CloseCircleOutlined style={{ color: '#ff4d4f' }} />,
    pending: <ClockCircleOutlined style={{ color: '#d9d9d9' }} />,
  };

  return iconMap[status];
};

/**
 * 获取状态文本
 */
const getStatusText = (status: ChecklistItem['status']): string => {
  const textMap = {
    passed: '通过',
    warning: '警告',
    failed: '未通过',
    pending: '待检查',
  };

  return textMap[status];
};

/**
 * 获取状态颜色
 */
const getStatusColor = (status: ChecklistItem['status']): string => {
  const colorMap = {
    passed: 'success',
    warning: 'warning',
    failed: 'error',
    pending: 'default',
  };

  return colorMap[status];
};

/**
 * 获取分类标签
 */
const getCategoryTag = (category: ChecklistItem['category']) => {
  const tagMap = {
    structure: { text: '结构', color: 'blue' },
    content: { text: '内容', color: 'green' },
    style: { text: '风格', color: 'purple' },
    grammar: { text: '语法', color: 'orange' },
  };

  const { text, color } = tagMap[category];
  return <Tag color={color}>{text}</Tag>;
};

export const ChecklistPanel: React.FC<ChecklistPanelProps> = ({
  items,
  progress = 0,
  onItemClick,
}) => {
  const passedCount = items.filter((item) => item.status === 'passed').length;
  const totalCount = items.length;

  return (
    <div className="checklist-panel">
      {/* 进度条 */}
      <div className="checklist-progress">
        <div className="progress-header">
          <span className="progress-title">完成度</span>
          <span className="progress-value">
            {passedCount}/{totalCount}
          </span>
        </div>
        <Progress
          percent={progress || Math.round((passedCount / totalCount) * 100)}
          strokeColor={{
            '0%': '#108ee9',
            '100%': '#87d068',
          }}
          status="active"
        />
      </div>

      {/* 检查项列表 */}
      <List
        className="checklist-list"
        dataSource={items}
        renderItem={(item) => (
          <List.Item
            className={`checklist-item checklist-item-${item.status}`}
            onClick={() => onItemClick && onItemClick(item)}
            style={{ cursor: onItemClick ? 'pointer' : 'default' }}
          >
            <div className="checklist-item-content">
              <div className="checklist-item-header">
                <Space>
                  {getStatusIcon(item.status)}
                  <span className="checklist-item-title">{item.title}</span>
                </Space>
                <Space size={4}>
                  {getCategoryTag(item.category)}
                  {item.position !== undefined && onItemClick && (
                    <Tooltip title="跳转到位置">
                      <Button
                        type="text"
                        size="small"
                        icon={<RightOutlined />}
                        onClick={(e) => {
                          e.stopPropagation();
                          onItemClick(item);
                        }}
                      />
                    </Tooltip>
                  )}
                </Space>
              </div>

              <p className="checklist-item-description">{item.description}</p>

              {item.suggestion && (
                <div className="checklist-item-suggestion">
                  <Tag icon={<ExclamationCircleOutlined />} color="orange">
                    建议
                  </Tag>
                  <span>{item.suggestion}</span>
                </div>
              )}
            </div>
          </List.Item>
        )}
      />

      {/* 统计信息 */}
      <div className="checklist-summary">
        <Space size="large">
          <Space size={4}>
            <CheckCircleOutlined style={{ color: '#52c41a' }} />
            <span>通过 {items.filter((i) => i.status === 'passed').length}</span>
          </Space>
          <Space size={4}>
            <ExclamationCircleOutlined style={{ color: '#faad14' }} />
            <span>警告 {items.filter((i) => i.status === 'warning').length}</span>
          </Space>
          <Space size={4}>
            <CloseCircleOutlined style={{ color: '#ff4d4f' }} />
            <span>未通过 {items.filter((i) => i.status === 'failed').length}</span>
          </Space>
        </Space>
      </div>
    </div>
  );
};
